<template>
    <div class="mask" v-if="show">
        <div class="info">
            <div class="maskLogo"><img src="../assets/fine.svg" /></div>
            <div class="title">Fine! Cut渲染中...</div>
            <div v-if="msgType == 'progress'">
                <n-progress type="circle" :percentage="~~(progressValue * 100).toFixed(1)"
                    style="--n-text-color-circle: rgba(0, 0, 0);--n-fill-color:rgb(245,70,70)" />
            </div>
            <div>{{ maskState }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { events } from "../assets/bus"
import { NProgress } from 'naive-ui'
const show = ref(false)
const maskState = ref("")
const msgType = ref("text")
const progressValue = ref(0)

events.on("start-create-video", (msg: any) => {
    msgType.value = msg.type;
    show.value = true;
    maskState.value = String(msg.msg)
    msg.value && (progressValue.value = msg.value)
})
events.on("end-create-video", () => { show.value = false })
</script>
<style scoped>
.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    left: 0;
    top: 0;
    z-index: 99999;
    text-align: center;
}

.info {
    background: white;
    width: 400px;
    height: 300px;
    border-radius: 6px;
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    box-sizing: border-box;
    padding: 10px;
}

.maskLogo {
    text-align: center;
}

.maskLogo img {
    width: 50%;
}

.title {
    font-size: 25px;
    text-align: center;
    padding: 5px;
}
</style>